// import React from 'react';
import React, { useState, useEffect } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { Modal, Table, Tag, DatePicker, Space, Radio, Menu, Dropdown, Button, message, Image, Tooltip } from 'antd';
const { RangePicker } = DatePicker;

import { DownOutlined, UserOutlined } from '@ant-design/icons';
import "./index.less"
// tankuang
function handleButtonClick(e) {
  message.info('Click on left button.');
  console.log('click left button', e);
}

function handleMenuClick(e) {
  message.info('Click on menu item.');
  console.log('click', e);
}
// 时间类型数据
const menu = (
  <Menu onClick={handleMenuClick}>
    <Menu.Item key="1" icon={<UserOutlined />}>
      1st menu item
    </Menu.Item>
    <Menu.Item key="2" icon={<UserOutlined />}>
      2nd menu item
    </Menu.Item>
    <Menu.Item key="3" icon={<UserOutlined />}>
      3rd menu item
    </Menu.Item>
  </Menu>
)
// 订单状态数据
const menu1 = (
  <Menu onClick={handleMenuClick}>
    <Menu.Item key="1" icon={<UserOutlined />}>
      代发货
    </Menu.Item>
    <Menu.Item key="2" icon={<UserOutlined />}>
      已付款
    </Menu.Item>
    <Menu.Item key="3" icon={<UserOutlined />}>
      退款中
    </Menu.Item>
  </Menu>
)
{/*  条件查询数据: */ }
const menu2 = (
  <Menu onClick={handleMenuClick}>
    <Menu.Item key="1" icon={<UserOutlined />}>
      姓名
    </Menu.Item>
    <Menu.Item key="2" icon={<UserOutlined />}>
      手机号
    </Menu.Item>
    <Menu.Item key="3" icon={<UserOutlined />}>
      地址
    </Menu.Item>
  </Menu>
)
// 打印类型 
const menu3 = (
  <Menu onClick={handleMenuClick}>
    <Menu.Item key="3" icon={<UserOutlined />}>
      全部
    </Menu.Item>
    <Menu.Item key="1" icon={<UserOutlined />}>
      发货单
    </Menu.Item>
    <Menu.Item key="2" icon={<UserOutlined />}>
      快递单
    </Menu.Item>

  </Menu>
)
// 打印状态
const menu4 = (
  <Menu onClick={handleMenuClick}>
    <Menu.Item key="1" icon={<UserOutlined />}>
      全部
    </Menu.Item>
    <Menu.Item key="2" icon={<UserOutlined />}>
      已打印
    </Menu.Item>
    <Menu.Item key="3" icon={<UserOutlined />}>
      未打印
    </Menu.Item>
  </Menu>
)
// 表格数据


const data = [
  {
    key: '1',
    name: "快填",
    tel: '17896563202',
    add: '上海八维宏业学校',
    zhuangtai: '',
    danhao: '1234569870258',
    guige: '88*23',
    num: '15',
    liuyan: '美国有苹果，中国有菠萝',
    userid: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.wxcha.com%2Ffile%2F201809%2F20%2Fdc30a93dcb.gif&refer=http%3A%2F%2Fimg.wxcha.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634558864&t=35716bcb30422ae75075ee1303a6a9c3',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: "快填",
    tel: '17896563202',
    add: '上海八维宏业学校',
    zhuangtai: '',
    danhao: '1234569870258',
    guige: '88*23',
    num: '15',
    liuyan: '美国有苹果，中国有菠萝',
    userid: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0719%2F8b5fcfa5g00qwh0rs00pqc0008c00bjc.gif&refer=http%3A%2F%2Fdingyue.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634558864&t=224930fcc9e34c968c1172e9a12eb3b0',
    tags: ['loser'],
  },
  {
    key: '3',
    name: "快填",
    tel: '17896563202',
    add: '上海八维宏业学校',
    zhuangtai: '',
    danhao: '1234569870258',
    guige: '88*23',
    num: '15',
    liuyan: '美国有苹果，中国有菠萝',

    userid: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fs9.rr.itc.cn%2Fr%2FwapChange%2F20166_18_12%2Fa0cxcl4482994154352.jpg&refer=http%3A%2F%2Fs9.rr.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634559178&t=9a24fcb9d5d829c0b43e8585d86abea1',
    tags: ['cool', 'teacher'],
  },
];

export default () => {

  const [isModalVisible, setisModalVisible] = useState(false)
  const [selectedRowKeys, setselectedRowKeys] = useState([])
  const columns = [
    {
      title: '用户编号',
      dataIndex: 'userid',
      key: 'userid',
      render: text => <a>{text}</a>,
    },
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },

    {
      title: '手机号',
      dataIndex: 'tel',
      key: 'tel',
    },
    {
      title: '收件地址',
      dataIndex: 'add',
      key: 'add',
    },
    {
      title: '快递单号',
      dataIndex: 'danhao',
      key: 'danhao',
    },
    {
      title: '订单规格',
      dataIndex: 'guige',
      key: 'guige',
    },
    {
      title: '宝贝数量',
      dataIndex: 'num',
      key: 'num',
    },
    {
      title: '商品图片',
      dataIndex: 'img',
      key: 'img',
      render: url => <div className="tupian">   <Image
        width={75}
        height={75}
        src={url}
      /> </div>,

    },
    {
      title: '留言备注',
      dataIndex: 'liuyan',
      key: 'liuyan',
    },
    {
      title: 'Action',
      key: 'action',
      render: record =>
        <Space size="middle">
          <Button onClick={()=> {
            console.log(record);
            setisModalVisible(true)
          }} >编辑</Button>
          <Button onClick={()=> {
            console.log(record.key,data)
            // data.splice(record.key, 1)
          }} >删除</Button>
        </Space>

    },
  ];

  const handleOk = () => {
   
    setisModalVisible(false)
  }
  const handleCancel = (record) => {
    console.log(record);

    setisModalVisible(false)
  }

  const onSelectChange = val => {
    console.log(2)
  }

  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };

  return (
    <PageContainer>
      <div className="pswarp">
        <div className="header">
          {/* 时间类型下拉 */}
          <div>
            搜索时间类形:  <Space wrap>
              <Dropdown overlay={menu}>
                <Button>
                  Button <DownOutlined />
                </Button>
              </Dropdown>
            </Space>,
                  </div>
          {/* 时间选择器 */}
          <div>
            <Space direction="vertical" size={12}>
              <RangePicker renderExtraFooter={() => 'extra footer'} />
            </Space>,
                 </div>
          {/* 订单状态 */}
          <div>
            订单状态: <Space wrap>
              <Dropdown overlay={menu1}>
                <Button>
                  Button <DownOutlined />
                </Button>
              </Dropdown>
            </Space>,
            </div>
          {/*  条件查询: */}
          <div>
            条件查询: <Space wrap>
              <Dropdown overlay={menu2}>
                <Button>
                  Button <DownOutlined />
                </Button>
              </Dropdown>
            </Space>,
            </div>
          {/* 打印类型 */}
          <div>
            打印类型: <Space wrap>
              <Dropdown overlay={menu3}>
                <Button>
                  Button <DownOutlined />
                </Button>
              </Dropdown>
            </Space>,
            </div>
          {/* 打印状态 */}
          <div>
            打印状态: <Space wrap>
              <Dropdown overlay={menu4}>
                <Button>
                  Button <DownOutlined />
                </Button>
              </Dropdown>
            </Space>,
            </div>

        </div>
        <div className="list">
          <div className="listtop">
            <div className="left">
              <p><span>订单情况:</span>123</p>
              <p><span>快递模块:</span>
                <Radio defaultChecked="true">Radio</Radio>
              </p>
            </div>
            <div className="right">
              <Button type="primary">订单导出</Button>
              <Button type="primary">配置模块</Button>
            </div>
          </div>
          <div className="listxia">
            <Table rowSelection={rowSelection} columns={columns} dataSource={data} />
          </div>
          <Modal title="Basic Modal" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
            <p>Some contents...</p>
            <p>Some contents...</p>
            <p>Some contents...</p>
          </Modal>
        </div>
      </div>
    </PageContainer>
  )
}

